<template>
  <div>
      <!-- 头部返回按钮 -->
      <div class="header">
        <div class="text" @click="okk">
        <i class="iconfont icon-back"></i>
        <span class="text1">
          <i class="iconfont icon-fanhui"></i>
          订单详情
          </span>
       </div>
    </div>

    <!-- 搜索我的订单 -->
    <div class="search">
      <input
        class="input"
        type="text"
        placeholder="搜索我的订单"
      />
    </div>

    <!-- 服务购买 -->
    <div class="serverBuy">
      <!-- 上面部分 -->
       <div class="up-text-tip">
         <!-- 左边 -->
         <div class="left" style="display:flex;margin-left:5%">
              <i class="iconfont icon-iconfontgoumaihongbao" style="margin-right:8px"></i>
              <div class="text-server-bug">服务购买</div>
         </div>
         <!-- 右边 -->
         <div class="buyer-payed">卖家待付款</div>
       </div>

       <!-- 中间部分 -->
        <!-- body person-->
      <div class="nurse-info">
        <!-- 左边的图标和文字 -->
        <div class="left-tip">
            <div class="person">
                <div class="icon">
                  <!-- <img :src="imageUrl" class="avatar"> -->
                  <img class="avatar" src="@/assets/images/dazhen.jpg">
                </div>
                <!-- <div class="name">{{nackname}}</div> liwhus-->
            </div>
            <div>
              <div class="nurse-name">上门打针</div>
              <div class="nurse-bg">i护理无忧订单</div>
            </div>
        </div>
        <!-- 右边 详细介绍 -->
        <div class="edit-person-info">￥90</div>
      </div>

      <!-- 下面右边部分 -->
      <div class="right-xot-tip">
        <div class="bottom-right">
          <div class="up-text">总价￥90,实付款￥90</div>
          <!-- <div class="down-button" @click="payment">立即付款</div> -->
          <el-button class="down-button" type="text" @click="centerDialogVisible = true">立即付款</el-button>

          <el-dialog
            title="付款"
            style="font-size:0.6rem"
            :visible.sync="centerDialogVisible"
            width="80%"
            center>
            <span style="font-size:0.55rem">你确定支付此订单吗</span>
            <div  style="font-size:0.45rem;color:red">(注意:一经支付不予以退款)</div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false" style="font-size:0.46rem">取 消</el-button>
              <el-button type="primary" @click="centerDialogVisible = false" style="font-size:0.46rem">确 定</el-button>
            </span>
          </el-dialog>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
Toast('Upload Complete')
export default {
  data () {
    return {
      centerDialogVisible: false
    }
  },
  methods: {
    okk () {
      this.$router.go(-1)// 返回上一层
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // eslint-disable-next-line vue/no-dupe-keys
    centerDialogVisible () {
      console.log('1')
      Toast({
        message: '支付成功',
        iconClass: 'icon icon-success'
      })
    }
  }
}
</script>

<style scoped>
/* 搜索我的订单 */
.search {
  background: #fff;
  color: #fff;
}
.search .input {
  margin: 3%;
  border-radius: 90px;
  height: 1rem;
  width: 95%;
  color: rgb(0, 0, 0);
  text-align: center;
  border: 1px solid gray;
  font-size: 0.5rem;
}
/* 订单详情 */
.serverBuy{
  border:0.02rem solid gray;
  width: 95%;
  margin: 2%;
  border-radius: 0.3rem;
  box-shadow: 3px 3px 5px #888888;
  margin-top: 5%;
}
.up-text-tip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.5rem;
  margin-top: 3%;
}
.text-server-bug{
  color: #888888;
  /* margin-left:2% */
}
.buyer-payed{
  color: rgb(255, 204, 153);
  margin-right:3%
}
/* 头部 */
.header {
  height: 1.5rem;
  width: 100%;
  background:rgb(255, 204, 153);;
}
.text{
  padding-top:4%;
  font-size:0.55rem;
  color:white
}
.iconfont{
  font-size: 0.55rem;
}
/* ------------------------ */
/* 护工的一个简短介绍 */
.nurse-info{
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border-bottom:1px solid #ccc */
}
.nurse-info .edit-person-info{
  margin-right: 10%;
  font-size: 0.45rem;
}
.avatar {
    width:2rem;
    height: 2rem;
    border-radius: 5px;
    background: blanchedalmond;
    margin-right: 3%;
}
.left-tip .nurse-name{
  font-size: 0.4rem;
  margin-left:20px;
}
.left-tip .nurse-bg{
  background: blanchedalmond;
  /* padding: 1%; */
  font-size: 0.35rem;
  color: rgb(129, 121, 121);
  margin-left: 10px;
  margin-top:4px
}
.nurse-info .left-tip{
  display: flex;
  justify-content: center;
  align-items: center;
  margin:3% 5% 3% 3%;
}
.bottom-right{
  text-align: right;
  margin-right: 3%;
  font-size: 0.45rem;
  margin-bottom:0.6rem;
}
.bottom-right .up-text{
  margin:0.2rem;
}
.bottom-right .down-button{
  margin-right: 0.2rem;
  border-radius: 50px;
  border:1px solid gray;
  text-align: center;
  padding: 1%;
  width: 30%;
  margin-left: 67%;
}
.right-xot-tip{
  text-align: right;
}
</style>
